<template>
    <f7-page>
        <f7-navbar>
            <f7-nav-left back-link=" " sliding></f7-nav-left>
            <f7-nav-center>家人</f7-nav-center>
            <f7-nav-right>
                <span v-show="!isEditting" @click="edit">编辑</span>
                <span v-show="isEditting" @click="cancelEdit">取消</span>
            </f7-nav-right>
        </f7-navbar>
        <div class="main avatar-list circle-detail">
            <f7-grid>
                <f7-col>
                    <div class="img-wrap" @click="select($event)">
                        <img src="../../assets/images/test.jpg">
                        <f7-icon fa="circle-o" v-show="isEditting"></f7-icon>
                    </div>
                    <p>于谦</p>
                </f7-col>
                <f7-col>
                    <div class="img-wrap" @click="select($event)">
                        <img src="../../assets/images/test.jpg">
                        <f7-icon fa="circle-o" v-show="isEditting"></f7-icon>
                    </div>
                    <p>郭德纲</p>
                </f7-col>
                <f7-col>
                    <div class="img-wrap" @click="select($event)">
                        <img src="../../assets/images/test.jpg">
                        <f7-icon fa="circle-o" v-show="isEditting"></f7-icon>
                    </div>
                    <p>小岳岳</p>
                </f7-col>
                <f7-col>
                    <div class="img-wrap" @click="select($event)">
                        <img src="../../assets/images/test.jpg">
                        <f7-icon fa="circle-o" v-show="isEditting"></f7-icon>
                    </div>
                    <p>于谦</p>
                </f7-col>
            </f7-grid>
            <f7-grid>
                <f7-col>
                    <div class="img-wrap" @click="select($event)">
                        <img src="../../assets/images/test.jpg">
                        <f7-icon fa="circle-o" v-show="isEditting"></f7-icon>
                    </div>
                    <p>于谦</p>
                </f7-col>
                <f7-col>
                    <div class="img-wrap" @click="select($event)">
                        <img src="../../assets/images/test.jpg">
                        <f7-icon fa="circle-o" v-show="isEditting"></f7-icon>
                    </div>
                    <p>郭德纲</p>
                </f7-col>
                <f7-col>
                    <div class="img-wrap" @click="select($event)">
                        <img src="../../assets/images/test.jpg">
                        <f7-icon fa="circle-o" v-show="isEditting"></f7-icon>
                    </div>
                    <p>小岳岳</p>
                </f7-col>
                <f7-col>
                    <f7-link icon-fa="plus-circle" class="btn-add" href="/contactList/selectPeople/"></f7-link>
                </f7-col>
            </f7-grid>
        </div>

        <f7-toolbar v-show="isEditting">
            <f7-link icon-fa="trash"></f7-link>
            <f7-link>解散圈子</f7-link>
        </f7-toolbar>
    </f7-page>
</template>

<style lang="scss">
    .circle-detail {
        .img-wrap {
            position: relative;

            .icon {
                position: absolute;
                top: 0;
                right: 0;
            }
        }
    }
</style>


<script>
    export default {
        data() {
            return {
                isEditting: false
            }
        },
        mounted() {
            this.$nextTick(() => {
                if (window.location.href.indexOf('#edit') !== -1) {
                    this.isEditting = true
                }
            })
        },
        methods: {
            edit() {
                this.isEditting = true
                this.$$('.back').hide()
            },
            cancelEdit() {
                this.isEditting = false
                this.$$('.back').show()
                this.$$('.img-wrap .icon').removeClass('fa-check-circle-o').addClass('fa-circle-o')
            },
            select(e) {
                if (this.isEditting) {
                    this.$$(e.target.offsetParent).find('.icon').toggleClass('fa-circle-o').toggleClass('fa-check-circle-o')
                }
            }
        }
    }
</script>